<script setup lang="ts">
import {Popover, Icon, showToast} from 'vant';

import {ref} from 'vue';
// 获取数据列表和数据列表定义
let videodt = ref([])

let getdt = () => {

}

// 搜索框内容状态定义 和 搜索触发函数
let searchTitle = ref('')
let onSearch = () => {
  console.log(searchTitle)
}

// 右上角气泡弹出框
let showPopover = ref(false)
let actions = [
  {text: '添加动态', icon: 'add-o'},
  {text: '我的部落'},
  {text: '信息'},
];
const onSelect = (action) => showToast(action.text);


</script>


<template>
  视频

  <div>

        <span class="fix">

        <div class="title">
            <span><img class="handimg" src="/1.jpg" alt="">
                <span class="statu">状态 &gt;</span>
            </span>


                <van-popover placement="bottom-end" :show="showPopover" :actions="actions" @select="onSelect">
                    <template #reference>
            <span class="plusicon">
                <svg t="1719917557291" class="icon plus" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="2521" width="20" height="20"><path
                    d="M906.212134 565.732986 565.732986 565.732986 565.732986 906.212134C565.732986 926.013685 541.666486 959.972 511.97312 959.972 482.297674 959.972 458.213254 926.013685 458.213254 906.212134L458.213254 565.732986 117.734106 565.732986C97.950475 565.732986 63.97424 541.666486 63.97424 511.97312 63.97424 482.279754 97.950475 458.213254 117.734106 458.213254L458.213254 458.213254 458.213254 117.734106C458.213254 97.950475 482.297674 63.97424 511.97312 63.97424 541.666486 63.97424 565.732986 97.950475 565.732986 117.734106L565.732986 458.213254 906.212134 458.213254C925.995765 458.213254 959.972 482.279754 959.972 511.97312 959.972 541.666486 925.995765 565.732986 906.212134 565.732986Z"
                    p-id="2522"></path></svg>
                </span>
            </template>
                            </van-popover>

        </div>
        <van-search

            v-model="searchTitle"
            shape="round"
            placeholder="搜索"
            @search="onSearch"
        />

</span>

    <div class="content">
      <div class="card">
        <div class="top"><img src="/1.jpg" alt=""></div>
        <div>
          <p class="cardtitle">"我的神殿失了火"</p>
          <p class="bottom">
            <span class="user"> <span class="smallimg"><img src="./1.jpg" alt=""></span>  <span
                class="uname">音乐漫游</span>   </span>
            <span class="like"> <svg t="1719919639527" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                     xmlns="http://www.w3.org/2000/svg" p-id="3495" width="15" height="15"><path
                d="M797.184 518.496l-284.384 294.016-284.16-292A162.752 162.752 0 0 1 192 417.6C192 328.512 263.808 256 352 256a159.36 159.36 0 0 1 133.28 72.16L512 368.64l26.72-40.48A159.488 159.488 0 0 1 672 256c88.224 0 160 72.512 160 161.6 0 37.536-12.992 74.08-34.816 100.896M672 192a222.72 222.72 0 0 0-160 67.712A222.624 222.624 0 0 0 352 192c-123.52 0-224 101.216-224 225.6 0 52.288 18.176 103.232 52.96 145.536l285.952 293.984a62.4 62.4 0 0 0 45.088 19.168c17.12 0 33.12-6.816 45.12-19.136l287.744-296.064A226.816 226.816 0 0 0 896 417.6C896 293.216 795.52 192 672 192"
                fill="#3E3A39" p-id="3496"></path></svg>9999</span></p>
        </div>

      </div>

    </div>


  </div>


</template>


<style scoped>


.title {
  background: rgb(247, 248, 250);
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-content: center;
  padding: 20px 20px 0px 20px;
}

.title > span {
  vertical-align: middle
}

.handimg {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

.statu {
  margin-left: 10px;
  vertical-align: bottom;
}

.plus {
  vertical-align: middle;
  height: 100%;
}

.top {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
}

.top img {
  height: 100%;
  width: auto;
  max-width: none;
}

.card {
  box-sizing: border-box;
  width: 45%;
  margin: 5px;
  background: white;
}

.smallimg {
  width: 200px;
  height: 200px;
  overflow: hidden;

}

.user {
  color: #999;
  font-size: 14px
}

.content {
  background: rgb(247, 248, 250);
  min-height: 100vh;
}

.bottom {
  padding: 10px;
  font-size: 14px;
  color: #999;
  display: flex;
  justify-content: space-between;
}

.icon {
  display: inline-block;
}
</style>